<template>
	<view class="goodies">
		<!-- 顶部搜索框 -->
		<nav-bar class="g_top" isBack backColor="#fff">
			<view class="g_tCan" slot="center">
				<view class="g_tBg"></view>
				<view class="g_tInput">
					<view class="g_tIcon iconfont icon-search"></view>
					<input type="text" confirm-type="search" v-model="searchVal" @confirm="searchData" placeholder="搜索您感兴趣的内容吧" placeholder-class="placeholder" />
				</view>
			</view>
		</nav-bar>
		
		<!-- 内容 -->
		<view class="g_contain">
			<view class="g_cCan">
				<!-- 左边nav栏 -->
				<scroll-view scroll-y="true" class="g_cNav">
					<view class="g_cnItem" :class="{'active': classifyIndex == items.cate_id}" v-for="items in classifyList" :key="items.cate_id" @click="toggleNav(items)">
						<text class="g_cnTxt">{{items.cate_name}}</text>
					</view>
					<view class="g_cnItem"></view>
				</scroll-view>
				<!-- 右边商品分类 -->
				<view class="g_cClass">
					<view class="g_ccList">
						<view class="g_ccGroup">
							<view class="g_ccTit">{{classcont.cate_name}}</view>
							<view class="g_ccItems">
								<view class="g_ccItem"  v-for="item in classcont.child" :key="item.cate_id" @click="intoStore(item.cate_id)">
									<view class="g_ccImage"><image :src="item.cate_logo"></image></view>
									<view class="g_ccTxt">{{item.cate_name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import URL from '@/config/url.js'
import navBar from '@/components/navBar/navBar.vue'
import service_mall from '@/service/mall.js'

export default {
	components: { navBar },
	
	data() {
		return {
			ImageUrl: URL.IMAGE,
			classifyIndex: null,
			classifyList: null,
			classcont:'',
			searchVal:''
		}
	},
	
	onLoad() {
		this.getList()
	},
	
	methods: {
		// 获取分类列表数据
		getList() {
			service_mall.class_getList()
				.then(res => {
					if (res.code == 1) {
						let cateList = res.data.cateLst   // 分类数据（一级二级分类）
						let hotList = res.data.hotCate    // 热门分类（二级分类，分类名称：热门）
						let nList = []
						
						// // 处理数据
						// cateList.forEach(val => {
						// 	if (val.child && val.child.length) nList.push(val)
						// })

						this.classifyIndex = cateList[0].cate_id
						this.classcont = cateList[0]
						// this.classifyList = [ { cate_id: 'hot', cate_name: '热门', child: hotList }, ...nList,]
						this.classifyList = cateList
					}
				})
				.catch(err => {
					
				})
		},
		
		// 切换nav栏
		toggleNav(items) {
			if (this.classifyIndex != items.cate_id) {
				this.classifyIndex = items.cate_id
				this.classcont = items
			}
		},
        searchData(){
			uni.navigateTo({ url: '/pages_now/pages/mall/goods/list?keyword=' + this.searchVal })
		},
		// 跳转分类所属商品列表
		intoStore(cateId){
			uni.navigateTo({ url:'/pages_now/pages/mall/goods/list?cate_id_lst=' + cateId })
		},
	}
}
</script>

<style lang="scss" scoped>
.goodies {height: 100vh;display: flex;flex-flow: column;
	// 顶部搜索框
	.g_top {position: relative;z-index: 100;
		.g_tCan {width: 100%;height: 66rpx;padding-right: 24rpx;}
		.g_tBg {width: 100vw;height: 500rpx;background: linear-gradient(135deg, #2e333f 0%, #191d29 100%);position: fixed;top: 0;left: 0;z-index: -1;}
		.g_tInput {height: 66rpx;border-radius: 34rpx;background: #fff;position: relative;opacity: .8;
			& > input {width: 100%;height: 100%;font-size: 24rpx;padding-left: 72rpx;}
		}
		.g_tIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;color: #6c6c6c;font-size: 32rpx;position: absolute;top: 18rpx;left: 32rpx;}
	}
	
	// 内容
	.g_contain {
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		padding-top: 40rpx;position: relative;z-index: 101;overflow: hidden;flex: 1;
		.g_cCan {height: 100%;border-radius: 20rpx 20rpx 0 0;background: #fff;display: flex;}
		// 左边nav栏
		.g_cNav {width: 172rpx;height: 100%;background-color: #f6f7fb;border-radius: 20rpx 0 0 0;font-size: 24rpx;overflow: hidden;
			.g_cnItem {width: 100%;height: 110rpx;line-height: 110rpx;text-align: center;border-radius: 56rpx;background: #f6f7fb;position: relative;z-index: 2;
				&.active {font-weight: bold;color: #a98f68;background: #fff;z-index: 1;}
				&.active::after {content: '';width: 50%;height: 200%;background: #fff;border-radius: 50rpx 0 0 50rpx;position: absolute;top: -50%;right: 0;z-index: 1;}
			}
			.g_cnTxt {position: relative;z-index: 2;}
		}
		// 右边商品分类
		.g_cClass {margin-left: 32rpx;flex: 1;
			.g_ccList {height: 100%;overflow-y: auto;}
			.g_ccTit {height: 76rpx;line-height: 76rpx;font-size: 32rpx;font-weight: bold;padding-top: 20rpx;margin-left: 12rpx;background: #fff;box-sizing: content-box;}	
			.g_ccItems {padding-top: 20rpx;display: flex;flex-wrap: wrap;}
			.g_ccItem {width: 156rpx;margin-left: 12rpx;display: flex;flex-wrap: wrap;justify-content: center;}
			.g_ccImage {width: 156rpx;height: 156rpx;}
			.g_ccTxt {font-size: 24rpx;line-height: 44rpx;}
		}
	}
}
</style>